<template>
	<div>
		<label>{{label}}:</label>
		<van-tag :color="color">{{labelValue}}</van-tag>
	</div>
</template>

<script>
	import utils from '@/utils/utils.js';
	export default {
		name: "TagComponent",
		props: ["componentModel", "rowData"],
		data() {
			return {
				label: "",
				color: "",
				"currentComponentModel": this.componentModel,
				labelValue: ""
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
			if (this.componentModel.label != undefined) {
				this.label = this.componentModel.label;
			}
			var colorIndicatorExpression = this.componentModel.colorIndicatorExpression;
			var colorJson = JSON.parse(colorIndicatorExpression);
			var value = this.rowData[this.componentModel.dataField];
			if (value != null) {
				this.color = colorJson[value];
			}
			var selectItemMap = this.rowData["selectItemMap"];
			var selectItemList = selectItemMap[this.componentModel.id];
			if (value != null) {
				this.color = colorJson[value];
				if (selectItemList != undefined) {
					for (var i = 0; i < selectItemList.length; i++) {
						if (selectItemList[i].value == value) {
							this.labelValue = selectItemList[i].name;
							break;
						}
					}
				} else {
					this.labelValue = value;
				}
			}
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			setProp(prop) {
				for (var k in prop) {
					if (k == "value") {
						this.label = prop[k];
						this.hasSubmit = true;
					} else if (k == "required") {
						this.required = prop[k];
					} else if (k == "label") {
						if (!this.hasSubmit) {
							this.label = prop[k];
						}
					}
				}
			},
			getValue() {
				if (!this.hasSubmit) {
					return undefined;
				}
				return this.label;
			}
		},
	}
</script>

<style>
</style>
